<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>banner</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <style>
        header{ background-color: #000000; border-bottom-style:solid; border-width: 0.005rem; border-color: #EEEEEE; }
        header div { height: 0.35rem;  }
        .flex{display: -webkit-box; display: -webkit-flex; display: flex;}
        .header{justify-content: center; width: 100%;}
        #header-title{
            width: 100%;
            line-height: 0.35rem;
            font-size: 0.18rem;
            text-align: center;
            color: #ffffff;
            font-weight:600;
        }
        #header-button{
            justify-content: space-between;
            align-items: center;
            position: fixed;
            width: 100%;
            height: 0.35rem;
        }
        #button-back{
            margin:0 0 0 0.20rem;
            width: 0.09rem;
            height: 0.16rem;
            background-image: url("../../image/my/arrow4.png");
            background-size: 0.09rem 0.16rem;
        }
        #success{
            justify-content: space-between;
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: #3ABA63;
        }
        body{
            background-color: #FBFCFF;
        }
        #footer{
            background-color: #000000;
            height: 0.60rem;
        }
        #button{
            width: 3.31rem;
            height: 0.56rem;
            background-color: #30A2FF;
            border-radius: 0.28rem;
            box-shadow: 0rem 0.10rem 0.24rem rgba(0,0,0,0.15);
            text-align: center;
            line-height: 0.56rem;
            color: white;
            font-size: 0.16rem;
        }
        .not-active{
            display: none;
        }
    </style>
</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical">
    <header>
    </header>
    <div id="main" style="background-color: yellow" class="flex-con">

    </div>
    <div id="footer" class="border-t">
        <div class="flex" style="width: 100%; height: 0.60rem; justify-content: space-between; align-items: center">
            <div style="width: 0.60rem; height: 0.60rem; margin-left: 0.10rem;" tapmode onclick="api.closeWin();">
                <p style="width: 100%; font-size: 0.16rem; line-height: 0.60rem; color: #ffffff; font-weight:500; text-align: center;">取消</p>
            </div>
            <div style="width: 0.60rem; height: 0.60rem;" tapmode onclick="resetClip()">
                <p style="width: 100%; font-size: 0.16rem; line-height: 0.60rem; color: #ffffff; font-weight:500; text-align: center;">还原</p>
            </div>
            <div style="width: 0.60rem; height: 0.60rem; margin-right: 0.10rem;" tapmode onclick="saveImage()">
                <p style="width: 100%; font-size: 0.16rem; line-height: 0.60rem; color: #ffffff; font-weight:500; text-align: center;">完成</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common/common.js"></script>
<script type="text/javascript">
    var headerHeight, footerEl, FNImageClip, qiniuStorage;
    apiready = function () {
        $api.fixStatusBar( $api.dom('header') );
        $api.fixTabBar($api.byId('footer'));
        qiniuStorage = api.require("qiniuStorage");
        qiniuStorage.configUploader({
            // params:{"x:foo":"fooval"},
            // checkCrc: false,
            // mimeType: '',
            zone: "z0"
        });

        headerHeight = $api.dom('header').offsetHeight;
        FNImageClip = api.require('FNImageClip');

        imageClip();
        // alert($api.dom('#main').offsetHeight);
    }

    function imageClip(path) {
        // alert(api.pageParam.path)
        FNImageClip.open({
            rect: {
                x: 0,
                y: headerHeight,
                w: api.winWidth,
                h: $api.dom('#main').offsetHeight,
            },
            srcPath: api.pageParam.path,
            highDefinition: true,
            mode: "image",
            style: {
                mask: 'rgba(0,0,0,0.4)',
                clip: {
                    w: api.winWidth,
                    h: api.winWidth,
                    x: 0,
                    y: (api.winHeight - api.winWidth - headerHeight) / 2 ,
                    borderColor: '#fff',
                    borderWidth: 1,
                    appearance: 'rectangle'
                }
            },
        }, function(ret, err) {
            if (ret) {
                // alert(JSON.stringify(ret));
            } else {
                // alert(JSON.stringify(err));
            }
        });
    }

    function resetClip() {
        FNImageClip.reset();
    }

    function saveImage() {
        FNImageClip.save({
            destPath: 'fs://avatar/result.png',
            // destPath: 'fs://imageClip/result.png',
            copyToAlbum: false,
            quality: 1
        }, function(ret, err) {
            if (ret) {
                pushImage(ret.destPath);
                // alert(JSON.stringify(ret));
            } else {

                api.toast({
                    msg: "图片上传失败",
                    duration: 2000,
                    location: 'middle'
                });
            }
        });
    }

    function pushImage(imgUrl) {
        api.openFrame({
            name: 'loadingPage',
            url: '../loadingPage.html',
            slidBackEnabled: false,
            bgColor: "rgba(0,0,0,0)",
            pageParam: {
                msg: "test",
            },
            animation: {
                type: 'none',
                duration: 0
            }
        });


        // var obj = api.require('aliCloudOss');
        // obj.init();
        // obj.putObject({
        //     bucket: "fortune-avatar",
        //     objectKey: "imge/userimge",
        //     filePath: imgUrl
        // }, function(ret, err){
        //     if( ret ){
        //         if (ret.eventType == "onComplete") {
        //             var jsfun = 'updateUserInfo("avatar", "' + ret.etag + '");';
        //             api.execScript({
        //                 name: 'userInfoWin',
        //                 frameName: 'userInfoFrame',
        //                 script: jsfun
        //             });
        //             api.closeWin();
        //         } else {
        //             alert("头像上传失败");
        //             api.closeWin();
        //         }
        //     }
        // });
        api.ajax({
            url: apiUrl + '/user/upload',
            tag: '/user/upload',
            method: 'get',
            data: {
                values: {
                    token: $api.getStorage("token"),
                }
            }
        }, function(ret, err) {
            // api.alert({ msg: JSON.stringify(ret) });
            if (ret) {
                if (ret.code == 0) {
                    var upToken = ret.data.upToken;

                    // alert(upToken)
                    console.log(upToken)
                    qiniuStorage.addEventListener(function(ret){
                        console.log(JSON.stringify(ret))
                        // alert(JSON.stringify(ret.info.error))
                        // api.alert({msg:JSON.stringify(ret)});
                        if (ret.eventType == "complete") {
                            // alert(ret.key)
                            if (ret.info.ok) {
                                updateOver(ret.key)
                            } else {
                                api.closeFrame({
                                    name: 'loadingPage'
                                });
                                api.toast({
                                    msg: "上传头像失败，请检查网络或稍后再试",
                                    duration: 2000,
                                    location: 'middle'
                                });
                            }
                        }
                    });

                    // alert(imgUrl)

                    var temname = new Date().getTime() + Math.round(Math.random()*100);
                    qiniuStorage.start({
                        token: upToken,
                        path: imgUrl,
                        key: 'avatar/' + temname + '.png'
                    });
                } else {
                    api.toast({
                        msg: ret.err_msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }
            } else {
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }

    function updateOver(name) {
        var temApiHeader = {
            "Content-Type": "application/json",
        };
        api.ajax({
            url: apiUrl + '/user/edit',
            tag: '/user/edit',
            headers: temApiHeader,
            method: 'post',
            data: {
                body: {
                    token: $api.getStorage("token"),
                    avatar: name,
                }
            }
        }, function(ret, err) {
            // api.alert({ msg: JSON.stringify(ret) });
            if (ret) {
                api.closeFrame({
                    name: 'loadingPage'
                });
                if (ret.Code == 0) {
                    api.execScript({
                        name: 'userInfoWin',
                        frameName: 'userInfoFrame',
                        script: 'window.location.reload();'
                    });
                    api.execScript({
                        name: 'main',
                        frameName: 'frame4',
                        script: 'reloadUserInfo();'
                    });
                    api.closeWin();
                } else {
                    api.toast({
                        msg: "上传头像失败，请检查网络或稍后再试",
                        duration: 2000,
                        location: 'middle'
                    });
                }
            } else {
                api.toast({
                    msg: "上传头像失败",
                    duration: 2000,
                    location: 'middle'
                });
                api.closeFrame({
                    name: 'loadingPage'
                });
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }
</script>
